<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        span {
            color: red;
        }
    </style>
</head>

<body>

    <div>
        default: <span>Hello, </span>World.
    </div>
    <hr>
    <div>
        none: <span style="display: none;">Hello, </span>World.
    </div>
    <hr>
    <div>
        block: <span style="display: block;">Hello, </span>World.
    </div>
    <hr>
    <div>
        inline: <span style="display: inline;">Hello, </span>World.
    </div>

</body>

</html>

<!-- display -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/display -->
<!-- display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。 -->

<!-- Box -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/display#box -->
<!-- 这些值决定元素是否使用盒模型。 -->
<!-- <display-box> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-box -->
<!-- 这些关键词定义一个元素到底是否产生显示盒（display boxes）。 -->
<!-- none -->
<!-- 关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。 -->
<!-- 要一个元素占据空间（文件中存在），但不渲染，请使用 visibility 属性。 -->

<!-- Outside -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/display#outside -->
<!-- 这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）。 -->
<!-- <display-outside> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-outside -->
<!-- The <display-outside> keywords specify the element’s outer display type, which is essentially its role in flow layout. These keywords are used as values of the display property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the <display-inside> (en-US) keywords. -->
<!-- block -->
<!-- 这个值会生成一个块级元素盒子，同时在该元素之前和之后打断（换行）。简单来说就是，这个值会将该元素变成块级元素。 -->
<!-- inline -->
<!-- 这个值会生成一个行内元素盒子，该元素之前和之后不会打断（换行）。如果空间充足，该元素后的元素将会在同一行显示。简单来说就是，这个值会将该元素变成行内元素。 -->


<!-- 注：关于display属性的官方标准描述，可以参考： -->
<!-- CSS1：https://www.w3.org/TR/CSS1/#display -->
<!-- CSS2：https://www.w3.org/TR/CSS2/visuren.html#display-prop -->
<!-- CSS21：https://www.w3.org/TR/CSS21/visuren.html#display-prop -->
<!-- Box Layout Modes: the display property：https://drafts.csswg.org/css-display-3/#the-display-properties -->